<template>
    <div class="container">
        <!-- 面包屑 -->
        <div class="top-bread">
            <el-breadcrumb separator="/" style="padding-top: 10px;padding-left: 5px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/roomtype">房间类型管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>房间类型列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- /面包屑 -->
        <!-- 内容主体 -->
        <div class="main-body">
            <div class="body">
                <!-- 顶部操作栏 -->
                <div class="top-operation">
                    <div class="operation">
                        <el-button type="danger" @click="deleteRow()">批量删除</el-button>
                        <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">
                            新增房型
                        </el-button>
                        <el-input v-model="input" placeholder="请输入内容"
                                  style="margin-left: 20px; width: 200px;"></el-input>
                        <el-button icon="el-icon-search" style="margin-left: 10px;" @click="selectRoomType()">查询
                        </el-button>
                    </div>
                </div>
                <!-- /顶部操作栏 -->
                <!-- 表格主体 -->
                <div class="table-body">
                    <template>
                        <el-table border @selection-change="handleSelectionChange"
                                  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                                  style="width: 100%;margin-top: 20px;">
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column prop="id" label="房型编号" width="80px" align="center"></el-table-column>
                            <el-table-column prop="name" label="房型名称" width="140px" align="center"></el-table-column>
                            <el-table-column prop="imgUrl" label="房型图片" align="center">
                                <template slot-scope="scope">
                                    <el-popover placement="top-start" trigger="click">
                                        <a target="_blank" title="查看最大化图片"><img :src="require('@/assets/img/'+scope.row.imgUrl)" min-width="400" height="400"/></a>
                                        <img slot="reference" :src="require('@/assets/img/'+scope.row.imgUrl)" style="width: 70px;height: 70px; cursor:pointer">
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="房间价格" width="150px" align="center"></el-table-column>
                            <el-table-column prop="bed" label="房间床数" width="120px" align="center"></el-table-column>
                            <el-table-column prop="description" label="房型描述" width="180px"
                                             align="center"></el-table-column>
                            <el-table-column prop="num" label="房型总数" width="80px" align="center"></el-table-column>
                            <el-table-column prop="store" label="房型剩余数量" width="110px" align="center">
                                <template slot-scope="{ row }">
                                    <span v-if="row.store==0">0</span>
                                    <span v-else>{{row.store}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="房间添加时间" width="200px"
                                             align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <!-- /表格主体 -->
                <div style="margin-left: 30px;margin-top: 170px">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- /内容主体 -->
        <!--添加页面-->
        <el-dialog title="输入信息" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="房型名称：" :label-width="formLabelWidth">
                    <el-input v-model="RoomType.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房型图片：" :label-width="formLabelWidth">
                    <el-upload ref="uploadDemo" action="http://localhost:8088/roomtype/elupload" :auto-upload="false"
                               multiple
                               :file-list="fileList">
                        <el-button size="small" type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="房型价格：" :label-width="formLabelWidth">
                    <el-input v-model="RoomType.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="提供床位：" :label-width="formLabelWidth">
                    <el-input v-model="RoomType.bed" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房型描述：" :label-width="formLabelWidth">
                    <el-input v-model="RoomType.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRoomType()">添 加</el-button>
            </div>
        </el-dialog>
        <!--修改信息界面-->
        <el-dialog title="修改房间类型信息" :visible.sync="updateFormVisible">
            <el-form>
                <el-form-item label="房型名称：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房型图片：" :label-width="formLabelWidth">
                    <el-upload ref="uploadDemo" action="http://localhost:8088/roomtype/elupload" :auto-upload="false"
                               multiple
                               :file-list="fileList" list-type="picture">
                        <el-button size="small" type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="房型价格：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="提供床位：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.bed" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房型描述：" :label-width="formLabelWidth">
                    <el-input v-model="Inform.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRoomType()">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'Room',
        data() {
            return {
                dialogFormVisible: false,//添加页面
                updateFormVisible: false,//修改页面
                formLabelWidth: '100px',
                input: '', // 搜索内容
                currentPage: 1, //初始页
                pageSize: 5,    //每页的数据
                RoomType: {},  //添加中转站
                Inform: {},//查询的单个存储
                tableData: [{}],
                delarr: [],//存放删除的数据
                multipleSelection: [],//多选的数据
                fileList: [],/*房型上传图片*/
            };
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            /*模糊查询*/
            selectRoomType() {
                let _this = this
                if (this.input == '') {
                    location.reload()
                    return false;
                }
                this.$axios.post("http://localhost:8088/roomtype/selectRoomType/" + this.input).then(function (res) {
                    _this.tableData = res.data
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*查询所有房间*/
            findAll() {
                let _this = this
                this.$axios.get("http://localhost:8088/roomtype/getRoomtype").then(function (res) {
                    _this.tableData = res.data
                    console.log(_this.tableData)
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*添加房型*/
            addRoomType() {
                if (!this.RoomType.name) {
                    alert('请输入房型名称');
                    return false
                }
                if (!this.RoomType.price) {
                    alert('请输入房型价格');
                    return false
                }
                if (!this.RoomType.bed) {
                    alert('请输入提供床位');
                    return false
                }
                if (!this.RoomType.description) {
                    alert('请输入描述');
                    return false
                }
                this.$refs.uploadDemo.submit()
                this.RoomType.imgUrl = this.$refs.uploadDemo.uploadFiles[0].name
                console.log(this.RoomType)
                let _this = this
                this.$axios.post("http://localhost:8088/roomtype/setRoomtype", this.RoomType).then(function () {
                    //清空本次保存数据
                    _this.$message({
                        showClose: true,
                        message: '房型信息添加成功!',
                        type: 'success'
                    });
                    _this.Role = {};
                    _this.dialogFormVisible = false
                    _this.findAll();
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '房型信息添加失败!',
                        type: 'error'
                    });
                })
            },
            /*根据id查询角色*/
            handleEdit(id) {
                this.updateFormVisible = true
                let _this = this
                this.$axios.get("http://localhost:8088/roomtype/getRoomTypeById/" + id).then(function (res) {
                    _this.Inform = res.data
                }).catch(function (err) {
                    alert('查询失败')
                })
            },
            /*更新房型*/
            updateRoomType() {
                let _this = this
                // 发送axios请求，根据查询一个
                _this.$refs.uploadDemo.submit()
                _this.Inform.imgUrl = this.$refs.uploadDemo.uploadFiles[0].name
                this.$axios.post("http://localhost:8088/roomtype/updateRoomtype", _this.Inform).then(function (res) {
                    _this.$message({
                        showClose: true,
                        message: '房型信息修改成功!',
                        type: 'success'
                    });
                    _this.updateFormVisible = false
                    _this.findAll();
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '房型信息修改失败!请联系管理员！',
                        type: 'error'
                    });
                })
            },
            /*删除房型*/
            handleDelete(id) {
                let _this = this
                if (window.confirm('确定要删除房型吗？')) {
                    // 发送axios请求，根据查询一个
                    this.$axios.post("http://localhost:8088/roomtype/deletedById/" + id).then(function () {
                        _this.findAll();
                        _this.$message({
                            showClose: true,
                            message: '房型删除成功!',
                            type: 'success'
                        });
                    }).catch(function (err) {
                        _this.$message({
                            showClose: true,
                            message: '房型删除失败!请联系管理员！',
                            type: 'error'
                        });
                    })
                }
            },
            /*操作多选*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /*批量删除房型*/
            deleteRow() {
                let _this = this
                const length = this.multipleSelection.length;
                if (length <= 0) {
                    alert("请勾选需要删除的选项！")
                    return false;
                }
                for (let i = 0; i < length; i++) {
                    this.delarr.push(this.multipleSelection[i].id)
                }
                this.$axios.post('http://localhost:8088/roomtype/deletedAllById', this.delarr).then(function (res) {
                    _this.$message({
                        showClose: true,
                        message: '批量删除房型成功!',
                        type: 'success'
                    });
                    setTimeout('location.reload()', 1000);
                }).catch(function (err) {
                    _this.$message({
                        showClose: true,
                        message: '删除失败！请联系管理员！',
                        type: 'error'
                    });
                })
            },
            /*实时更新房间总数*/
            updateRoomTypeNum() {
                this.$axios.get("http://localhost:8088/roomtype/updateRoomTypeNum").then(function (res) {
                    console.log("房间总数更新成功！")
                }).catch(function (err) {
                    console.log("房间总数更新失败！")
                })
            },
            /*实时更新可预订房间数量*/
            updateRoomTypeStore() {
                this.$axios.get("http://localhost:8088/roomtype/updateRoomTypeStore").then(function (res) {
                    console.log("房间可预订数量更新成功！")
                }).catch(function (err) {
                    console.log("房间可预订数量更新失败！")
                })
            },
        },
        mounted() {
            this.findAll()
            this.updateRoomTypeNum()
            this.updateRoomTypeStore()
        },
    };
</script>

<style scoped>
    .top-bread {
        width: 100%;
        height: 30px;
        background-color: #efeef0;
    }

    .main-body {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 750px;
    }

    .body {
        width: 90%;
        height: 750px;
        background-color: #ffffff;
    }

    .top-operation {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
    }

    .operation {
        margin-top: 10px;
        margin-left: 50px;
        display: flex;
        align-items: center;
    }

    .table-body {
        margin: auto;
        width: 95%;
        height: 400px;
    }
</style>
